import React, { Component } from 'react'
import { Layout, Button, message } from 'antd';
import './index.scss'
const { Content } = Layout;
const constraints = window.constraints = {
    audio: false,
    video: true
};
let stream;
let canvas;
let context;
export default class P7_local_cavans extends Component {
    componentDidMount() {
        canvas = this.refs['canvas']
        this.startCaptureCanvas();
    }
    startCaptureCanvas = async (e) => {
        stream = canvas.mozCaptureStream ?//捕获数据流
            canvas.mozCaptureStream() ://火狐浏览器
            canvas.captureStream();//谷歌浏览器
        const video = this.refs['video']
        video.srcObject = stream;//将canvas数据流与video控件绑定
        this.drawLine()
    }
    drawLine = () => {
        context = canvas.getContext('2d')
        context.fillStyle = '#CCC'
        context.fillRect(0, 0, 320, 240);
        context.lineWidth = 1
        context.strokeStyle = "#FF0000";
        canvas.addEventListener('mousedown', this.startAction)
        canvas.addEventListener('mouseup', this.endAction)
    }
    startAction = (event) => {
        context.beginPath();
        context.moveTo(event.offsetX, event.offsetY);
        context.stroke();
        canvas.addEventListener('mousemove', this.moveAction)
    }
    moveAction = (event) => {
        context.lineTo(event.offsetX, event.offsetY);
        context.stroke();
    }

    endAction = (event) => {
        canvas.removeEventListener("mousemove", this.moveAction);
    }

    render() {
        return (
            <div>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 700,
                    }}>
                    <div className="small-canvas">
                        <canvas ref="canvas"></canvas>
                    </div>
                    <video className="small-video" ref="video"
                        playsInline autoPlay
                    ></video>
                </Content>
            </div>
        )
    }
}
